<script setup>
import {defineProps, ref, watch, watchEffect} from "vue";
  import { Plus } from "@element-plus/icons-vue";
  import Loading from '@/components/common/Loading.vue'
  import StringUtil from "@/utils/StringUtil.js";
  import { useStore } from "@/store/index.js";

  let store = useStore();

  const props = defineProps({
    data: {
      id: String,
      title: String,
      iconUrl: String,
      iconAlias: String,
      isAdd: Boolean,
      // 收藏项显示状态，1 加载状态，2 关闭加载过度动画，3 删除过度动画样式并出发收藏项展示元素，4正常显示
      displayType: Number
    }
  })

  // 定义中转变量存储 props 数据，使其可写
  let writeProps = ref(props.data);

  // 监听组件数据的变更
  watchEffect(() => {
    switch (writeProps.value.displayType) {
      case 1:
        setTimeout(() => {
          // 修改 props.data.displayType 的值
          props.data.displayType = 2;
        }, 700);
        break;
      case 2:
        setTimeout(() => {
          // 修改 writeProps.value.displayType 的值
          writeProps.value.displayType = 3;
        }, 300);
        break;
      case 3:
        setTimeout(() => {
          // 修改 writeProps.value.displayType 的值
          writeProps.value.displayType = 4;
          // 修改状态库中的 displayType 值
          store.collection.method.resetItemById(props.data.id);
        }, 700);
        break;
    }
  });

</script>

<template>
  <div class="collect-item-basic">

    <!-- 收藏项展示 -->
    <div :class="['main', writeProps.displayType === 3 ? 'main-dynamic-animation':'']" v-if="writeProps.displayType === 3 || writeProps.displayType === 4">
      <div class="logo-basic">
        <!-- 正常收藏项图标 -->
        <el-image :src="data.title" class="normal-icon">
          <template #error>
            <div class="not-normal-alias">
              {{ writeProps.iconAlias }}
            </div>
          </template>
        </el-image>
      </div>
    </div>
    <div class="title" v-if="writeProps.displayType === 3 || writeProps.displayType === 4">
      <span>{{ StringUtil.limit(data.title, 8) }}</span>
    </div>

    <!-- 收藏项添加 -->
    <div class="add" v-if="writeProps.isAdd">
      <el-icon style="font-size: 45px">
        <Plus />
      </el-icon>
    </div>

    <!-- 初始化加载 -->
    <div :class="['loading']" v-if="writeProps.displayType === 1">
      <Loading/>
    </div>

  </div>
</template>

<style scoped>
  .collect-item-basic {
    width: 100px;
    height: 130px;
  }

  .main {
    width: 100px;
    height: 100px;
    background-color: rgb(235, 235, 235);
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
  }
  .main:hover {
    cursor: pointer;
    opacity: 0.7;
  }
  .main-dynamic-animation {
    animation: main-animation 0.7s linear forwards;
  }

  .logo-basic {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .normal-icon {
    width: 35px;
    height: 35px;
    user-select: none;
  }

  .not-normal-alias {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    background-color: white;
  }

  .title {
    width: 100px;
    height: 26px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }
  .title span {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }
  .title:hover {
    cursor: default;
  }
  .title span:hover {
    cursor: pointer;
  }


  .add {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.4);
    color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s;
  }
  .add:hover {
    background-color: rgba(235, 235, 235, 0.9);
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
  }


  .loading {
    width: 100px;
    height: 100px;
    background-color: rgb(235, 235, 235);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  @keyframes main-animation {
    0% {
      opacity: 0;
    }
    30% {
      opacity: 0.6;
    }
    60% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
</style>